<template>
  <a-modal :title="title" :width="1200" :visible="visible" :confirm-loading="confirmLoading" cancel-text="关闭" @ok="submit" @cancel="closeModal">
    <a-spin :spinning="confirmLoading">
      <a-descriptions bordered title="订单详情" size="middle">
        <a-descriptions-item label="订单号" :span="2"> {{detail.id}} </a-descriptions-item>
        <a-descriptions-item label="订单状态"> {{detail.status | orderStatus}} </a-descriptions-item>

        <a-descriptions-item label="开单人姓名"> {{detail.name}} </a-descriptions-item>
        <a-descriptions-item label="开单人手机号" :span="2"> {{detail.mobile}} </a-descriptions-item>
        <a-descriptions-item label="开单人医院"> {{detail.hospitalName}} </a-descriptions-item>
        <a-descriptions-item label="开单人病区"> {{detail.areaName}} </a-descriptions-item>
        <a-descriptions-item label="开单人角色"> {{detail.roleName}} </a-descriptions-item>
        <a-descriptions-item label="开单人备注" :span="3"> {{detail.remark}} </a-descriptions-item>

        <a-descriptions-item label="姓名"> {{detail.personName}} </a-descriptions-item>
        <a-descriptions-item label="手机号"> {{detail.personMobile}} </a-descriptions-item>
        <a-descriptions-item label="身份证号"> {{detail.personIdent}} </a-descriptions-item>

        <a-descriptions-item label="病区病床" :span="3"> {{detail.personArea}} {{detail.personBed}}</a-descriptions-item>
        <a-descriptions-item label="取货码" :span="3"> {{detail.code}} </a-descriptions-item>

        <a-descriptions-item label="总金额"> {{detail.money | filtersMoney}} </a-descriptions-item>
        <a-descriptions-item label="支付方式"> {{detail.payChannel}} </a-descriptions-item>
        
        <a-descriptions-item label="创建时间" :span="3"> {{detail.createTime}} </a-descriptions-item>
      </a-descriptions>
      <div class="print_box">
        <a-card>
          <a-button type="primary" v-print="'#printMe'">打印单据信息</a-button>
          <a-card>
            <div id="printMe" class="print_region">
              <a-descriptions bordered title="患者信息" size="middle">
                <a-descriptions-item label="姓名" :span="3"> {{detail.personName}} </a-descriptions-item>
                <a-descriptions-item label="手机号" :span="3"> {{detail.personMobile | mobileHide}} </a-descriptions-item>
                <a-descriptions-item label="病区" :span="3"> 
                  <b class="print_b">{{detail.personArea}}</b>
                </a-descriptions-item>
                <a-descriptions-item label="床位号" :span="3"> 
                  <b class="print_b">{{detail.personBed}}</b>
                </a-descriptions-item>
                <a-descriptions-item label="订单信息" :span="3">
                  <table class="print_table">
                    <tr>
                      <th>序号</th>
                      <th>产品信息</th>
                      <th>数量</th>
                      <th>总金额</th>
                    </tr>
                    <tr v-for="(item , index) in detail.goods" :key="index">
                      <td>{{index+1}}</td>
                      <td>{{item.goodsTitle}}/{{item.spec}}</td>
                      <td>x{{item.count}}</td>
                      <td>￥{{item.totalPrice | filtersMoney}}</td>
                    </tr>
                  </table>
                </a-descriptions-item>
                <a-descriptions-item label="费用合计" :span="3">  {{detail.money | filtersMoney}}</a-descriptions-item>
                <a-descriptions-item label="下单时间" :span="3">  {{detail.createTime}}</a-descriptions-item>
              </a-descriptions>
            </div>
          </a-card>
        </a-card>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { Slime } from '@/mixins/slime';
import { evaFiltersMixin } from '@/mixins/evaMixin';

import ApiTree from '@/api/order/orderList';
export default {
  name: 'orderListModal',
  mixins: [Slime, evaFiltersMixin],
  data() {
    return {
      title: '订单详情',
      detail: {},
    };
  },
  created() {},
  methods: {
    // 改
    crudUpdate(record) {
      this.visible = true;
      ApiTree.getDetail(record.id)
        .then((res) => {
          let data = res.result;
          this.detail = data
        })
        .finally(() => {});
    },
    // 提交
    submit() {
      this.closeModal();
    },
    // 弹窗-关闭
    closeModal() {
      this.confirmLoading = false;
      this.visible = false;
      this.$emit('closeModal');
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.print_box{
  margin-top: 10px;
}
.print_table{
  width: 600px;
}
.print_box_b{
  margin-top: 10px;
}
/*去除页眉页脚*/
@page{
  size:  auto;   /* auto is the initial value */
  margin: 3mm;  /* this affects the margin in the printer settings */
}

html{
  background-color: #FFFFFF;
  margin: 0;  /* this affects the margin on the html before sending to printer */
}

body{
  border: solid 1px blue ;
  margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}
/*去除页眉页脚*/
.print_b{
  font-size: 18px;
  font-weight: 800;
}
.print_region{
  padding: 20px;
}
</style>